import { useEffect, useState } from 'react';
import { Modal, Button } from 'antd';

interface OpenScreenData {
    title: string;
    content: string;
    buttonText: string;
}

const DIALOG_SHOWN_KEY = 'home_dialog_shown';

export default function OpenScreenDialog() {
    const [isVisible, setIsVisible] = useState(false);
    const [dialogData, setDialogData] = useState<OpenScreenData | null>(null);

    // 检查弹窗是否已经显示过
    const hasDialogShown = () => {
        // 确保代码运行在客户端
        if (typeof window !== 'undefined') {
            return localStorage.getItem(DIALOG_SHOWN_KEY) === 'true';
        }
        return false;
    };

    // 标记弹窗已显示
    const markDialogAsShown = () => {
        localStorage.setItem(DIALOG_SHOWN_KEY, 'true');
    };

    // 模拟获取弹窗数据的请求
    const fetchDialogData = async () => {
        try {
            // 如果已经显示过，直接返回
            if (hasDialogShown()) {
                return;
            }

            // 这里替换为实际的 API 请求
            const response = await fetch('/api/dialog-data');
            const data = await response.json();
            setDialogData(data);
            setIsVisible(true);
        } catch (error) {
            console.error('Failed to fetch dialog data:', error);
        }
    };

    // 处理弹窗关闭
    const handleClose = () => {
        setIsVisible(false);
        markDialogAsShown();
    };

    // 处理按钮点击
    const handleButtonClick = async () => {
        try {
            // 这里替换为实际的 API 请求
            await fetch('/api/dialog-action', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    action: 'click',
                    timestamp: new Date().toISOString(),
                }),
            });
            
            handleClose();
        } catch (error) {
            console.error('Failed to send action:', error);
            // 即使请求失败也关闭弹窗
            handleClose();
        }
    };

    // 组件挂载时获取数据
    useEffect(() => {
        fetchDialogData();
    }, []);

    // 如果没有数据或已经显示过，不渲染任何内容
    if (!dialogData || hasDialogShown()) {
        return null;
    }

    return (
        <Modal
            title={dialogData.title}
            open={isVisible}
            onCancel={handleClose}
            footer={[
                <Button key="submit" type="primary" onClick={handleButtonClick}>
                    {dialogData.buttonText}
                </Button>,
            ]}
        >
            <div className="dialog-content">
                {dialogData.content}
            </div>
        </Modal>
    );
}
